<template>
  <div>
    <div class="operate-btns">
      <el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
      <router-link to="/crawlsiteadd">
        <el-button type="primary" plain icon="el-icon-circle-plus-outline">添加站点</el-button>
      </router-link>
    </div>
    <el-table :data="tableData4" :show-header=true :highlight-current-row="true">
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="province" label="省份"></el-table-column>
      <el-table-column prop="city" label="市区"></el-table-column>
      <el-table-column prop="address" label="地址" width="800"></el-table-column>
      <el-table-column prop="zip" label="邮编"></el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button @click.native.prevent="deleteRow(scope.$index, tableData4)" type="text" size="small">
            编辑
          </el-button>
          <el-button @click.native.prevent="deleteRow(scope.$index, tableData4)" type="text" size="small">
            移除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>
  </div>
</template>

<style>
  .hover-row > td {
    background-color: rgba(0, 0, 0, .1) !important;
  }

  .el-table__header thead th {
    font-weight: bolder;
    text-align: center;
    color: black;
  }

  .el-table__fixed, .el-table__fixed-right {
    box-shadow: 0 0 0 0;
  }
</style>

<style scoped>
  .operate-btns {
    margin: 0 0 20px 0;
    text-align: left;
  }
</style>